<template>
  <div id="main" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '300px'
  //   }
  // },
  props:['dayProducedWaterQuality'],
  data() {
    return {
      chart: null
    }
  },
  watch: {
    dayProducedWaterQuality(){

      // this.chartData=[]
      // for (let i in this.waterSoledRatio){
      //   this.chartData.push(this.waterSoledRatio[i])
      // }
      this.initChart()
    },
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     this.setOptions(val);
    //   },
    // },
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart()
    // })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      if(!this.chart ){
      this.chart = echarts.init(this.$el, 'macarons')
      }
      // this.chart.setOption({
      //
      //   angleAxis: {},
      //   radiusAxis: {
      //     type: 'category',
      //     data: ['余氧', 'PH值', '浊度', '电导率'],
      //     z: 10
      //   },
      //   polar: {},
      //   series: [
      //     {
      //       type: 'bar',
      //       data: [1, 2, 3, 4],
      //       coordinateSystem: 'polar',
      //       name: 'A',
      //       stack: 'a',
      //       emphasis: {
      //         focus: 'series'
      //       }
      //     },
      //     {
      //       type: 'bar',
      //       data: [2, 4, 6, 8],
      //       coordinateSystem: 'polar',
      //       name: 'B',
      //       stack: 'a',
      //       emphasis: {
      //         focus: 'series'
      //       }
      //     },
      //     {
      //       type: 'bar',
      //       data: [1, 2, 3, 4],
      //       coordinateSystem: 'polar',
      //       name: 'C',
      //       stack: 'a',
      //       emphasis: {
      //         focus: 'series'
      //       }
      //     }
      //   ],
      //   legend: {
      //     show: true,
      //     data: ['A', 'B', 'C']
      //   }
      // })
      // this.chart.setOption()
      this.chart.setOption ({
        // backgroundColor: '#fff',
        title: {
          text: '本日预警数量',
          textStyle: {
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            // fontWeight: "bolder",
            fontSize: 12,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: 'item',
          // show: false,
        },
        color: ['rgba(25, 255, 162, 1)','rgba(255, 218, 51, 1)','rgba(77, 205, 243, 1)','rgba(255, 0, 0, 1)'],
        legend: {
          show: true,
          orient: 'vertical',
          left: 0,
          top:20,
          itemGap: 1,
          iconWidth:5,
          iconHeight:5,
          iconStyle: {
            width:0,
            height:0
          },
          data:[ '电导率','浊度','PH值','余氧'],
          textStyle: {
            fontFamily: 'Arial',
            fontSize: 10,
            color: "#ffffff",
          }

        },
        // radiusAxis: {
        // type: 'category',
        // data: ['a', 'b', 'c', 'd']
        // },

        series: [{
          name: '余氧',
          type: 'pie',
          outsideLabel: {
            show: false
          },
          insideLabel: {
            show: true
          },
          //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
          startAngle: -90,
          hoverAnimation: false,
          tooltip: {
          },
          radius: ["20%", "30%"],
          center: ['45%', '65%'],
          label: {
            normal: {
              show: false,
              position: 'center',
              color: '#fff',
              formatter: function(params) {
                return params.value
              },
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: 24,
            itemStyle: {
              normal: {
                color: "rgba(25, 255, 162,0)"
              }
            }
          },
            {
              value: this.dayProducedWaterQuality[0],
              itemStyle: {
                normal: {
                  color: "rgba(25, 255, 162,1)"
                }
              }

            },
            {
              value: 24-this.dayProducedWaterQuality[0],
              itemStyle: {
                normal: {
                  color: "rgba(25, 255, 162,0.1)"
                }
              }
            },

          ]
        },


          {
            name: 'PH值',
            type: 'pie',
            startAngle: -90,
            radius: ['35%', '45%'],
            center: ['45%', '65%'],
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 24,
              itemStyle: {
                normal: {
                  color: "rgba(255, 218, 51,0)"
                }
              }
            },
              {
                value: this.dayProducedWaterQuality[1],
                itemStyle: {
                  normal: {
                    color: "rgba(255, 218, 51,1)"
                  }
                }

              },
              {
                value: 24-this.dayProducedWaterQuality[1],
                itemStyle: {
                  normal: {
                    color: "rgba(255, 218, 51,0.1)"
                  }
                }
              },

            ]
          },

          {
            name: '浊度',
            type: 'pie',
            startAngle: -90,
            hoverAnimation: false,
            radius: ["50%", "60%"],
            center: ['45%', '65%'],
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '10',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 24,
              itemStyle: {
                normal: {
                  color: "rgba(77, 205, 243,0)"
                }
              }
            },
              {
                value: this.dayProducedWaterQuality[2],
                itemStyle: {
                  normal: {
                    color: "rgba(77, 205, 243,1)"
                  }
                }

              },
              {
                value: 24-this.dayProducedWaterQuality[2],
                itemStyle: {
                  normal: {
                    color: "rgba(77, 205, 243,0.1)"
                  }
                }
              },
            ]
          },

          {
            name: '电导率',
            type: 'pie',
            startAngle: -90,
            hoverAnimation: false,
            radius: ["65%", "75%"],
            center: ['45%', '65%'],
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '10',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value:24,
              itemStyle: {
                normal: {
                  color: "rgba(255, 0, 0,0)"
                }
              }
            },
              {
                value: this.dayProducedWaterQuality[3],
                itemStyle: {
                  normal: {
                    color: "rgba(255, 0, 0,1)"
                  }
                }

              },
              {
                value: 24-this.dayProducedWaterQuality[3],
                itemStyle: {
                  normal: {
                    color: "rgba(255, 0, 0,0.1)"
                  }
                }
              },
            ]
          }
        ]
      });
    }
  }
}
</script>

